<template>
    <div class="system-menu-list">
        <a-button type="primary" class="base-mb10" @click="openAddModal">+ 添加菜单/节点</a-button>
        <a-form ref="searchFormRef" class="search-form base-mb15" :model="searchFormState" @finish="onSearchFinish">
            <a-row :gutter="24">
                <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="6">
                    <a-form-item name="keywords" label="">
                        <a-input allow-clear v-model:value="searchFormState['keywords']" placeholder="请输入菜单/节点名称"></a-input>
                    </a-form-item>
                </a-col>
                <a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="base-flex base-rows">
                    <a-button type="primary" html-type="submit">提交搜索</a-button>
                </a-col>
            </a-row>
        </a-form>
        <s-table ref="stableRef" :loading="tableConfig.loading" :columns="sourceColumn" :data="sourceData" :row-key="record => record.name" :pagination="tableConfig.pagination" :light-index="tableConfig.lightIndex" is-row-selection>
            <template #top>
                <a-button @click="onTableExpand">{{ isExpand ? "收起" : "展开" }}</a-button>
                <a-button class="base-ml10">删除</a-button>
            </template>
            <template #bodyCell="{ column, record, index }">
                <template v-if="column.key === 'title'"> {{ record.title }} </template>
                <template v-else-if="column.key === 'vue_icon'">
                    <component :is="record.meta.icon" class="base-f18" v-if="record.meta.icon"></component>
                </template>
                <template v-else-if="column.key === 'vue_type'">
                    <span class="base-text primary" v-if="record.meta.type === 'menu'">路由</span>
                    <span class="base-text " v-if="record.meta.type === 'title'">标题</span>
                    <span class="base-text " v-if="record.meta.type === 'link'">链接</span>
<!--                    <span class="base-text green" v-if="record.meta.type === 'menu'">是</span>-->
<!--                    <span class="base-text primary" v-else>否</span>-->
                </template>
                <template v-else-if="column.key === 'action'">
                    <span>
                        <a href="javascript:void(0)" @click.stop="openAddSonModal(record, index)">添加子菜单/节点</a>
                        <a-divider type="vertical" />
                        <a href="javascript:void(0)">编辑</a>
                        <a-divider type="vertical" />
                        <a href="javascript:void(0)">删除</a>
                    </span>
                </template>
            </template>
        </s-table>
        <MenuEditModal ref="menuEditRef" @ok="" @close=""></MenuEditModal>
    </div>
</template>

<script setup>
import { nextTick, onMounted, ref } from 'vue'
import MenuEditModal from './edit_modal.vue'
const searchFormState = ref({
    keywords: '', // 菜单名称
})
// 是否展开
const isExpand = ref(false)
const stableRef = ref(null)
const tableConfig = ref({
    loading: true,
    pagination: {
        total: 30,
        current: 1,
        pageSize: 10
    },
    lightIndex: [], // 要高亮的行号
})
// 表格列
const sourceColumn = ref([
    {
        title: '菜单/节点名称',
        key: 'title',
        fixed: 'left'
        // width: 220
    },
    {
        title: '标识',
        key: 'name',
        dataIndex: 'name',
    },
    // {
    //     title: 'vue_path',
    //     key: 'path',
    //     dataIndex: 'path',
    // },
    // {
    //     title: 'vue_redirect',
    //     key: 'redirect',
    //     dataIndex: 'redirect',
    // },
    // {
    //     title: 'vue_component',
    //     key: 'component',
    //     dataIndex: 'component'
    // },
    {
        title: '图标',
        key: 'vue_icon',
    },
    {
        title: '属性',
        key: 'vue_type',
        // dataIndex: 'vue_type',
        // width: 300,
        // ellipsis: true
    },
    {
        title: '排序',
        key: 'sort',
        dataIndex: 'sort',
        // width: 80,
        align: 'center'
    },
    {
        title: 'ID号',
        key: 'id',
        dataIndex: 'id',
        // width: 80,
        align: 'center'
    },
    {
        title: '操作',
        key: 'action',
        dataIndex: 'action',
        // width: 240,
        fixed: 'right'
    },
])
const sourceData = ref([
  {
    path: '/dashboard',
    name: 'dashboard',
    redirect: '/dashboard/index',
    component: 'layouts/BasicLayout',
    title: '工作台',
    meta: {
      showMenu: true, // 是否显示
      icon: 'DashboardOutlined',
      type: 'menu', // 类型：title 标题，menu 菜单，iframe，button 按钮
      role: ['user']	// 必填
    },
    children: [
      {
        path: '/dashboard/index',
        name: 'dashboardIndex',
        component: 'views/dashboard/index',
        title: '整体概况',
        meta: {
          showMenu: false, // 是否显示菜单
          icon: 'DashboardOutlined',
          type: 'menu', // 类型：title 标题，menu 菜单，iframe，button 按钮
          role: ['user']	// 必填
        }
      }
    ]
  },
  {
    path: '/system',
    name: 'system',
    redirect: '/system/menu',
    title: '系统设置',
    component: 'layouts/BasicLayout',
    meta: {
      showMenu: true, // 是否显示
      icon: 'SettingOutlined',
      type: 'menu', 	// 类型：title 标题，menu 菜单，iframe，button 按钮
      role: ['user', 'admin']	// 必填
    },
    children: [
      {
        path: '/system/menu',
        name: 'systemMenu',
        component: 'views/system/menu/index',
        title: '菜单管理',
        meta: {
          showMenu: true, // 是否显示菜单
          icon: 'MenuOutlined',
          type: 'menu', // 类型：title 标题，menu 菜单，iframe，button 按钮
          role: ['user', 'admin']	// 必填
        }
      },
      {
        path: '/system/user',
        name: 'systemUser',
        component: 'views/system/user/index',
        title: '用户管理',
        meta: {
          showMenu: true, // 是否显示菜单
          icon: 'UserOutlined',
          type: 'menu', // 类型：title 标题，menu 菜单，iframe，button 按钮
          role: ['user', 'admin']	// 必填
        }
      },
      {
        path: '/system/role',
        name: 'systemRole',
        component: 'views/system/role/index',
        title: '角色管理',
        meta: {
          showMenu: true, // 是否显示菜单
          icon: 'KeyOutlined',
          type: 'menu', // 类型：title 标题，menu 菜单，iframe，button 按钮
          role: ['user', 'admin']	// 必填
        }
      }
    ]
  },
  {
    path: '/plan',
    name: 'plan',
    redirect: '/plan/order',
    title: '生产计划',
    component: 'layouts/BasicLayout',
    meta: {
      showMenu: true, // 是否显示
      icon: 'FileTextOutlined',
      type: 'menu', 	// 类型：title 标题，menu 菜单，iframe，button 按钮
      role: ['user']	// 必填
    },
    children: [
      {
        path: '/plan/order',
        name: 'planOrder',
        title: '生产订单',
        component: 'views/plan/order/index',
        meta: {
          showMenu: true, // 是否显示
          icon: 'BarsOutlined',
          type: 'menu', 	// 类型：title 标题，menu 菜单，iframe，button 按钮
          role: ['user']	// 必填
        }
      },
      {
        path: '/plan/capacity',
        name: 'planCapacity',
        title: '能力排程',
        component: 'views/plan/capacity/index',
        meta: {
          showMenu: true, // 是否显示
          icon: 'BarsOutlined',
          type: 'menu', 	// 类型：title 标题，menu 菜单，iframe，button 按钮
          role: ['user']	// 必填
        }
      },
      {
        path: '/plan/material',
        name: 'planMaterial',
        title: '物料需求',
        component: 'views/plan/material/index',
        meta: {
          showMenu: true, // 是否显示
          icon: 'BarsOutlined',
          type: 'menu', 	// 类型：title 标题，menu 菜单，iframe，button 按钮
          role: ['user']	// 必填
        }
      },
      {
        path: '/plan/process',
        name: 'planProcess',
        title: '工艺路线',
        component: 'views/plan/process/index',
        meta: {
          showMenu: true, // 是否显示
          icon: 'BarsOutlined',
          type: 'menu', 	// 类型：title 标题，menu 菜单，iframe，button 按钮
          role: ['user']	// 必填
        }
      }
    ]
  },
  {
    path: '/hrm',
    name: 'HRM',
    redirect: '/hrm/employee/list',
    component: 'layouts/BasicLayout',
    meta: {
      title: 'HRM',
      showMenu: true, // 是否显示
      icon: 'SolutionOutlined',
      type: 'menu', // 类型：title 标题，menu 菜单，iframe，button 按钮
      role: ['user']	// 必填
    },
    children: [
      {
        path: '/hrm/employee',
        name: 'HRMEmployee',
        component: '',
        meta: {
          title: '员工管理',
          showMenu: true, // 是否显示菜单
          icon: '',
          type: 'title', // 类型：title 标题，menu 菜单，iframe，button 按钮
          role: ['user']	// 必填
        },
        children: [
          {
            path: '/hrm/employee/list',
            name: 'HRMEmployeeList',
            component: 'views/hrm/employee/list',
            meta: {
              title: '员工管理',
              showMenu: true, // 是否显示菜单
              icon: '',
              type: 'menu',
              role: ['user']	// 必填
            }
          }
        ]
      }
    ]
  },
  {
    path: '/crm',
    name: 'crm',
    redirect: '/crm/my/clue',
    component: 'layouts/BasicLayout',
    meta: {
      title: 'CRM',
      showMenu: true, // 是否显示
      icon: 'FileTextOutlined',
      type: 'menu', // 类型：title 标题，menu 菜单，iframe，button 按钮
      role: ['user']	// 必填
    },
    children: [
      {
        path: '/crm/clue',
        name: 'CRMClue',
        component: '',
        meta: {
          title: '线索管理',
          showMenu: true, // 是否显示菜单
          type: 'title', // 类型：title 标题，menu 菜单，iframe，button 按钮
          role: ['user']	// 必填
        },
        children: [
          {
            path: '/crm/clue/my',
            name: 'CRMClueMy',
            component: 'views/crm/clue/my_list',
            meta: {
              title: '我的线索',
              showMenu: true, // 是否显示菜单
              type: 'menu',
              role: ['user']	// 必填
            }
          },
          {
            path: '/crm/clue/dep',
            name: 'CRMClueDep',
            component: 'views/crm/clue/dep_list',
            meta: {
              title: '部门线索',
              showMenu: true, // 是否显示菜单
              type: 'menu',
              role: ['user']	// 必填
            }
          }
        ]
      },
      {
        path: '/crm/manage',
        name: 'CRMManage',
        component: '',
        meta: {
          title: '客户管理',
          showMenu: true, // 是否显示菜单
          type: 'title', // 类型：title 标题，menu 菜单，iframe，button 按钮
          role: ['user']	// 必填
        },
        children: [
          {
            path: '/crm/customer/my',
            name: 'CRMCustomerMy',
            component: 'views/crm/customer/my_list',
            meta: {
              title: '我的客户',
              showMenu: true, // 是否显示菜单
              type: 'menu',
              role: ['user']	// 必填
            }
          },
          {
            path: '/crm/customer/dep',
            name: 'CRMCustomerDep',
            component: 'views/crm/customer/dep_list',
            meta: {
              title: '部门客户',
              showMenu: true, // 是否显示菜单
              type: 'menu',
              role: ['user']	// 必填
            }
          }
        ]
      }
    ]
  },
  {
    path: '/setting',
    name: 'Setting',
    redirect: '/setting/base/job',
    component: 'layouts/BasicLayout',
    meta: {
      title: '设置',
      showMenu: true, // 是否显示
      icon: 'SettingOutlined',
      type: 'menu',
      role: ['user']	// 必填
    },
    children: [
      {
        path: '/setting/base',
        name: 'SettingBase',
        component: '',
        meta: {
          title: '基本设置',
          showMenu: true, // 是否显示
          icon: '',
          type: 'title', // 类型：title 标题，menu 菜单，iframe，button 按钮
          role: ['user']	// 必填
        },
        children: [
          {
            path: '/setting/base/department',
            name: 'SettingBaseDepartment',
            component: 'views/setting/base/department_list',
            meta: {
              title: '部门架构',
              showMenu: true, // 是否显示
              icon: '',
              type: 'menu', // 类型：title 标题，menu 菜单，iframe，button 按钮
              role: ['user']	// 必填
            }
          },
          {
            path: '/setting/base/role',
            name: 'SettingBaseRole',
            component: 'views/setting/base/role_list',
            meta: {
              title: '权限角色',
              showMenu: true, // 是否显示
              icon: '',
              type: 'menu', // 类型：title 标题，menu 菜单，iframe，button 按钮
              role: ['user']	// 必填
            }
          },
          {
            path: '/setting/base/job',
            name: 'SettingBaseJob',
            component: 'views/setting/base/job_list',
            meta: {
              title: '岗位职称',
              showMenu: true, // 是否显示
              icon: '',
              type: 'menu', // 类型：title 标题，menu 菜单，iframe，button 按钮
              role: ['user']	// 必填
            }
          },
          {
            path: '/setting/base/menu',
            name: 'SettingBaseMenu',
            component: 'views/setting/base/menu_list',
            meta: {
              title: '菜单管理',
              showMenu: true, // 是否显示
              icon: '',
              type: 'menu', // 类型：title 标题，menu 菜单，iframe，button 按钮
              role: ['user']	// 必填
            }
          }
        ]
      }

    ]
  }
])
const menuEditRef = ref(null)
onMounted(() => {

    setTimeout(() => {
        Object.assign(tableConfig.value, {
            loading: false,
            pagination: {
                total: 120,
                current: 1,
                pageSize: 10
            }
        })
    }, 1000)

})

const onSearchFinish = (values) => {
    console.log('searchFormState: ', searchFormState)
}

const onTableExpand = () => {
    isExpand.value = !isExpand.value
    console.log(isExpand.value)
    stableRef.value.onExpandAll(isExpand.value)
}

const openAddModal = () => {
    menuEditRef.value.add()
}
const openAddSonModal = (record, index) => {
    // tableConfig.value.lightIndex = [index] // 仅高亮当前行
    // nextTick(() => {
    //   menuEditRef.value.addSon(record)
    // })
}

</script>

<style lang="scss" scoped>
.system-menu-list {
    height: 100%;
    background: #ffffff;
    padding: 15px;

    .search-form {
        padding: 16px;
        background: rgb(247, 248, 250);

        :deep(.ant-form-item) {
            margin-bottom: 0;
        }
    }
}
</style>
